<template>
  <Cascader :data="areaData" v-model="targetValue" :placeholder="placeholder" :load-data="loadAreaData" :disabled="disabled"></Cascader>
</template>

<script>
  import {ProvinceData, CityData, CountyData} from '../../common/data/area/area'

  export default {
    name: "areaCascader",
    props: {
      value: Array,
      target:{
        type:String,
        default:'county'//province,city
      },placeholder:{
        type:String,
        default: '请选择地区'
      },disabled:{
        type:Boolean,
        default:false
      }
    },
    data() {
      return {
        areaData: [...ProvinceData],
        targetValue:[]
      }
    },
    watch: {
      value(cur){
        this.targetValue=cur
      },targetValue(cur){
        this.$emit('input',cur)
      }
    },
    components: {},
    computed: {},
    methods: {
      loadAreaData(item, callback) {
        item.loading = true;
        switch (item.target) {
          case "province":
            item.children = [...CityData[item.value]]
            if(this.target!=='city'){
              item.children.map(item=>{
                item.children = []
                item.target = 'city'
                item.loading = false
              })
            }
            break
          case "city":
            item.children = [...CountyData[item.value]]
            break
        }
        item.loading = false;
        callback()
      }
    },
    created() {

    },
    mounted() {
      if(this.target!=='province'){
        this.areaData.map(item => {
          item.children = []
          item.target = 'province'
          item.loading = false
        })
      }
      if(!this.isEmptyObject(this.value))
        this.targetValue=this.value

    }
  }
</script>

<style scoped lang="less">

</style>
